<template>
  <div class="container flex flex_column">
    <div class="nav flex">
      <span class="back mr10 pointer" @click="Back"><i class="el-icon-arrow-left" /> 返回</span><span
        class="fw"
      >客户详情</span>
    </div>
    <div class="GCon flex1 flex flex_between">
      <div class="lfCon">
        <div class="userName">
          <div class="f18 fw">{{ dataInfos.customerName }}</div>
          <div class="userLable">
            <ul class="flex flex_wrap">
              <template v-for="item in tagDatas">
                <li :key="item.tagID">
                  {{ item.tagContent }}
                  <span class="el-icon-error colse" @click="deleTags(item.tagID)" />
                </li>
              </template>
              <li class="addLabel" @click="isLabelDialog = true">
                <i class="el-icon-plus" /> 添加标签
              </li>
            </ul>
          </div>
        </div>
        <div class="userNav">
          <ul>
            <li :class="tabIndex===0?'crt':''" @click="tabChange(0)">
              <i class="iconfont enterpriseIco" /> 基本信息
            </li>
            <li :class="tabIndex===1?'crt':''" @click="tabChange(1)">
              <i class="iconfont orderIco" /> 客户订单
            </li>
            <li :class="tabIndex===2?'crt':''" @click="tabChange(2)">
              <i class="iconfont qualificationsIco" /> 客户资质
            </li>
            <li :class="tabIndex===3?'crt':''" @click="tabChange(3)">
              <i class="iconfont ziliaoIco" /> 客户资料
            </li>
            <li :class="tabIndex===4?'crt':''" @click="tabChange(4)">
              <i class="iconfont contractIco" /> 合同管理
            </li>
          </ul>
        </div>
      </div>
      <div ref="rgcon" class="rgCon">
        <!-- 基本信息       -->
        <div v-if="tabIndex===0" class="baseInfo">
          <div class="inItem">
            <div class="cTitle flex flex_between">
              <h3>客户信息</h3>
              <span class="pr16 pointer c_3F61F1" @click="editCusInfoClick"><i class="el-icon-edit"></i>编辑</span>
            </div>
            <div class="conShow">
              <ul class="flex flex_wrap" :class="'listNum'+listIndex">
                <li>
                  <div class="conTitle">客户编号</div>
                  <div class="conBox">{{ dataInfos.customerNumber }}</div>
                </li>
                <li>
                  <div class="conTitle">客户名称</div>
                  <div class="conBox">{{ dataInfos.customerName }}</div>
                </li>
                <li>
                  <div class="conTitle">客户电话</div>
                  <div class="conBox">{{ dataInfos.telephoneNo || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">客户地址</div>
                  <div class="conBox">{{ dataInfos.customerAddress || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">备注</div>
                  <div class="conBox">{{ dataInfos.customerRemark || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">结算方式</div>
                  <div class="conBox">{{ dataInfos.settlementWayName || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">销售代表</div>
                  <div class="conBox">{{ dataInfos.belongToSalesmanName || '暂无' }}</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="inItem">
            <div class="cTitle flex flex_between">
              <h3>联系人信息</h3>
              <span class="pr16 pointer c_3F61F1" @click="editContactClick"><i class="el-icon-edit"></i>编辑</span>
            </div>
            <div class="conShow">
              <ul class="flex flex_wrap" :class="'listNum'+listIndex">
                <li>
                  <div class="conTitle">联系人姓名</div>
                  <div class="conBox">{{ dataInfos.contactPerson }}</div>
                </li>
                <li>
                  <div class="conTitle">联系性别</div>
                  <div class="conBox">{{ dataInfos.contactManSexName }}</div>
                </li>
                <li>
                  <div class="conTitle">联系手机</div>
                  <div class="conBox">{{ dataInfos.contactMobile || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">联系人微信</div>
                  <div class="conBox">{{ dataInfos.contactWx || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">联系人QQ</div>
                  <div class="conBox">{{ dataInfos.contactQQ || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">联系人邮箱</div>
                  <div class="conBox">{{ dataInfos.contactEmail || '暂无' }}</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="inItem">
            <div class="cTitle flex flex_between">
              <h3>开票信息</h3>
              <span class="pr16 pointer c_3F61F1" @click="editInvoiceClick"><i class="el-icon-edit"></i>编辑</span>
            </div>
            <div class="conShow">
              <ul class="flex flex_wrap" :class="'listNum'+listIndex">
                <li>
                  <div class="conTitle">发票类型</div>
                  <div class="conBox">{{ dataInfos.invoiceTypeName }}</div>
                </li>
                <li>
                  <div class="conTitle">开票抬头</div>
                  <div class="conBox">{{ dataInfos.invoiceTitle || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">纳税人识别号</div>
                  <div class="conBox">{{ dataInfos.taxpayerIdentifyCode || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">开票电话</div>
                  <div class="conBox">{{ dataInfos.makeInvoiceTelephone || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">开票地址</div>
                  <div class="conBox">{{ dataInfos.makeInvoiceAddress || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">开户银行</div>
                  <div class="conBox">{{ dataInfos.openAccountBank || '暂无' }}</div>
                </li>
                <li>
                  <div class="conTitle">银行账号</div>
                  <div class="conBox">{{ dataInfos.bankCardNo || '暂无' }}</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="inItem">
            <div class="cTitle">
              <h3>收货地址</h3>
            </div>
            <div class="conShow addressShow">
              <ul class="flex flex_wrap" :class="'listNum'+listIndex">
                <template v-for="item in shippingAddress">
                  <li :key="item.receiveAddressID">
                    <div class="addressItem flex flex_column">
                      <div class="f14 fw">
                        <span class="mr10">{{ item.contactPersonName }}</span>
                        <span>{{ item.contactTelephone }}</span>
                      </div>
                      <div class="C_999aaa mt12 flex1">
                        <span>{{ item.fullReceiveAddress }}</span>
                      </div>
                      <div v-if="item.isDefaultReceive===1" class="pt16">
                        <el-button type="primary" round size="mini">默认收货地址</el-button>
                      </div>
                      <!-- 地址隐藏操作 -->
                      <div class="hiddenOptions flex flex_end">
                        <div class="flex flex_end">
                          <span v-if="item.isDefaultReceive===0" @click="setDefaultAddress(item.receiveAddressID)">设为默认</span>
                          <span @click="editAddress(item)">编辑</span>
                          <span @click="deleteAddress(item.receiveAddressID)">删除</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </template>
                <li class="newAddAddress" @click="newAddAddress">
                  <div class="addressItem flex-column-center pointer">
                    <div class="conTitle tc fw"><i class="el-icon-plus f22" /></div>
                    <div class="conBoxc tc mt8">添加收货地址</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 客户订单       -->
        <div v-if="tabIndex===1" class="cusOrderBox">
          <cusOrder />
        </div>
        <!-- 客户资质       -->
        <div v-if="tabIndex===2" class="cusOrderBox">
          <cusIntelligence></cusIntelligence>
        </div>
        <!-- 客户资料       -->
        <div v-if="tabIndex===3" class="cusOrderBox">
          <cusMaterial></cusMaterial>
        </div>
        <!-- 客户合同管理       -->
        <div v-if="tabIndex===4" class="cusOrderBox">
          <cusContract></cusContract>
        </div>
      </div>
    </div>
    <!-- 添加客户标签   -->
    <el-dialog
      title="新建客户标签"
      :visible.sync="isLabelDialog"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="30%"
      @close="closeLabelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="labelForm"
          :model="labelForm"
          :rules="labelRules"
          label-width="80px"
          class="dialogForm"
        >
          <el-form-item label="标签名称" prop="tagContent">
            <el-input v-model="labelForm.tagContent" placeholder="请输入标签名称" size="mini" clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isLabelDialog=false">取 消</el-button>
        <el-button
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="newAddLable"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑客户信息   -->
    <el-dialog
        title="客户信息"
        :visible.sync="isCusInfoDialog"
        :close-on-click-modal="false"
        custom-class="comDialog"
        width="30%"
        @close="closeLabelDialog"
    >
      <div class="dialogDody">
        <el-form
            ref="cusForm"
            :model="cusForm"
            :rules="cusRules"
            label-width="80px"
            class="dialogForm"
        >
          <el-form-item label="客户编号">
            <el-input v-model="dataInfos.customerCode" placeholder="请输入客户编号" size="mini" disabled />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="cusForm.customerName" placeholder="请输入客户名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="客户电话">
            <el-input v-model="cusForm.telephoneNo" placeholder="请输入客户电话" size="mini" clearable />
          </el-form-item>
          <el-form-item label="结算方式">
            <el-select
                        filterable v-model="cusForm.settlementWay" filterable placeholder="请选择结算方式" size="mini">
              <el-option label="现结" :value="1" />
              <el-option label="月结" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="销售代表" prop="belongToSalesmanName">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input v-model="cusForm.belongToSalesmanName" placeholder="选择人员" size="mini" disabled />
              </div>
              <div class="ml10 btnPer">
                <el-button type="primary" size="mini" icon="el-icon-user" @click="isperShow=true">选择</el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="客户地址">
            <el-cascader
                v-model="cusForm.addressArr"
                size="mini"
                :options="allAddress"
                :props="{label:'areaName',value:'areaCode'}"
                @change="areaChange"
            />
          </el-form-item>
          <el-form-item label="" class="mt5">
            <el-input v-model="cusForm.customerAddress" :rows="2" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input v-model="cusForm.customerRemark" :rows="2" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isCusInfoDialog=false">取 消</el-button>
        <el-button
            v-loading="addLableLoading"
            :disabled="addLableLoading"
            element-loading-spinner="el-icon-loading"
            type="primary"
            size="mini"
            @click="editSaveCus"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑联系人信息  -->
    <el-dialog
        title="联系人信息"
        :visible.sync="isContactDialog"
        :close-on-click-modal="false"
        custom-class="comDialog"
        width="30%"
        @close="closeContactDialog"
    >
      <div class="dialogDody">
        <el-form
            ref="contactForm"
            :model="contactForm"
            label-width="90px"
            class="dialogForm"
        >
          <el-form-item label="联系人姓名">
            <el-input v-model="contactForm.contactPerson" placeholder="请输入标签名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="联系人性别">
            <el-radio v-model="contactForm.contactManSex" label="1">男</el-radio>
            <el-radio v-model="contactForm.contactManSex" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-input v-model="contactForm.contactMobile" placeholder="请输入标签名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="联系人微信">
            <el-input v-model="contactForm.contactWx" placeholder="请输入标签名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="联系人QQ">
            <el-input v-model="contactForm.contactQQ" placeholder="请输入标签名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="联系人邮箱">
            <el-input v-model="contactForm.contactEmail" placeholder="请输入标签名称" size="mini" clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isContactDialog=false">取 消</el-button>
        <el-button
            v-loading="addLableLoading"
            :disabled="addLableLoading"
            element-loading-spinner="el-icon-loading"
            type="primary"
            size="mini"
            @click="editContact"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑开票信息   -->
    <el-dialog
        title="开票信息"
        :visible.sync="isInvoiceDialog"
        :close-on-click-modal="false"
        custom-class="comDialog"
        width="30%"
        @close="closeInvoiceDialog"
    >
      <div class="dialogDody">
        <el-form
            ref="invoiceForm"
            :model="invoiceForm"
            :rules="invoiceRules"
            label-width="110px"
            class="dialogForm"
            :validate-on-rule-change="false"
        >
          <el-form-item label="发票类型" prop="invoiceType">
            <el-radio-group v-model="invoiceForm.invoiceType" @change="invoiceTypeChange">
              <el-radio label="1">普通发票</el-radio>
              <el-radio label="2">增值税专票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开票抬头" prop="invoiceTitle">
            <el-input v-model="invoiceForm.invoiceTitle" placeholder="请输入开票抬头" size="mini" clearable />
          </el-form-item>
          <el-form-item label="纳税人识别号" prop="taxpayerIdentifyCode">
            <el-input v-model="invoiceForm.taxpayerIdentifyCode" placeholder="请输入纳税人识别号" size="mini" clearable />
          </el-form-item>
          <el-form-item label="单位地址" class="mt5" prop="makeInvoiceAddress">
            <el-input v-model="invoiceForm.makeInvoiceAddress" :rows="2" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
          <el-form-item label="开票电话" prop="makeInvoiceTelephone">
            <el-input v-model="invoiceForm.makeInvoiceTelephone" placeholder="请输入开票电话" size="mini" clearable />
          </el-form-item>
          <el-form-item label="开户银行" class="mt5" prop="openAccountBank">
            <el-input v-model="invoiceForm.openAccountBank" :rows="2" type="textarea" placeholder="请输入内容" size="mini" />
          </el-form-item>
          <el-form-item label="银行账号" prop="bankCardNo">
            <el-input v-model="invoiceForm.bankCardNo" placeholder="请输入银行账号" size="mini" clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isInvoiceDialog=false">取 消</el-button>
        <el-button
            v-loading="addLableLoading"
            :disabled="addLableLoading"
            element-loading-spinner="el-icon-loading"
            type="primary"
            size="mini"
            @click="editInvoice"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 添加收货地址   -->
    <el-dialog
      :title="ops === 'modify'?'编辑收货地址':'新建收货地址'"
      :visible.sync="isAdressDialog"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeAddressDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="adressForm"
          :model="adressForm"
          :rules="adressRules"
          label-width="90px"
          class="dialogForm"
        >
          <el-form-item label="收货人姓名" prop="contactPersonName">
            <el-input v-model="adressForm.contactPersonName" placeholder="收货人姓名" size="mini" clearable />
          </el-form-item>
          <el-form-item label="收货人电话" prop="contactTelephone">
            <el-input v-model="adressForm.contactTelephone" placeholder="收货人电话" size="mini" clearable />
          </el-form-item>
          <el-form-item label="收货人地址" prop="addressArr">
            <el-cascader
              v-model="adressForm.addressArr"
              placeholder="省/市/区(地址联动)"
              size="mini"
              :options="allAddress"
              :props="{label:'areaName',value:'areaCode'}"
              @change="areaChange"
            />
          </el-form-item>
          <el-form-item label=" " prop="detailedAddress" class="mt8">
            <el-input v-model="adressForm.detailedAddress" type="textarea" :rows="3" placeholder="请输入内容" clearable />
          </el-form-item>
          <el-form-item label=" " prop="isDefult">
            <el-checkbox v-model="adressForm.isDefult">设为默认收货地址</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAdressDialog=false">取 消</el-button>
        <!-- 新增       -->
        <el-button
          v-if="ops === 'add'"
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="newAddAdress"
        >保存</el-button>
        <!--  修改      -->
        <el-button
          v-else-if="ops === 'modify'"
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="editAddAdress"
        >保存</el-button>
      </span>
    </el-dialog>
    <!-- 人员寻找弹框   -->
    <per-redio-dialog :per-visible.sync="isperShow" @getEmployee="getEmployee" />
  </div>
</template>
<script>
import cusOrder from './components/customerOrder'
import cusIntelligence from './components/customerIntelligence'
import cusContract from './components/customerContract'
import cusMaterial from './components/customerMaterial'
import perRedioDialog from '@/components/perDialogRedio'
export default {
  name: '',
  components: { cusOrder, cusIntelligence, cusContract, cusMaterial, perRedioDialog },
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字'))
        } else {
          if (/^1[3-9]\d{9}$/.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 300)
    }
    return {
      ops: 'add', // 当前操作，新增/编辑
      isInvoiceDialog: false, // 发票信息弹框是否打开
      isContactDialog: false, // 联系人信息弹框是否打开
      isperShow: false, // 人员弹框是否显示
      isCusInfoDialog: false, // 客户信息弹框是否显示
      isAdressDialog: false, // 新建收货地址弹框是否打开
      isLabelDialog: false, // 添加用户标签弹框是否打开
      addLableLoading: false, // 保存用户新建标签加班效果
      listIndex: '', // 基本信息li个数
      dataInfos: {}, // 客户基本信息
      tagDatas: [], // 客户标签
      shippingAddress: [], // 收货地址
      tabIndex: 0, // 右侧显示板块对应得索引
      labelForm: {
        customerCode: '',
        tagContent: ''
      },
      invoiceForm: {
        customerID: '',
        invoiceType: 1,
        invoiceTitle: '',
        taxpayerIdentifyCode: '',
        makeInvoiceAddress: '',
        makeInvoiceTelephone: '',
        openAccountBank: '',
        bankCardNo: ''
      },
      cusForm: {
        customerID: '',
        customerName: '',
        telephoneNo: '',
        province: '',
        city: '',
        country: '',
        customerAddress: '',
        settlementWay: 1,
        customerRemark: '',
        belongToSalesman: '',
        belongToSalesmanName: '',
        addressArr: []
      },
      contactForm: {
        customerID: '',
        contactPerson: '',
        contactManSex: '1',
        contactMobile: '',
        contactWx: '',
        contactQQ: '',
        contactEmail: ''
      },
      allAddress: [], // 地址联动集合
      adressForm: {
        customerCode: '',
        contactPersonName: '',
        contactTelephone: '',
        province: '',
        city: '',
        country: '',
        detailedAddress: '',
        addressArr: [],
        isDefult: false,
        isDefaultReceive: 0
      },
      labelRules: {
        tagContent: [
          { required: true, message: '请选择采购类型', trigger: 'change' }
        ]
      },
      adressRules: {
        contactPersonName: [
          { required: true, message: '请输入收货人姓名', trigger: 'change' }
        ],
        contactTelephone: [
          { required: true, message: '请输入收货人电话', trigger: 'change' }
        ],
        addressArr: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ],
        detailedAddress: [
          { required: true, message: '请输入具体地址', trigger: 'change' }
        ]
      },
      cusRules: {
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'change' }
        ],
        belongToSalesmanName: [
          { required: true, message: '请选择销售代表', trigger: 'change' }
        ]
      },
      invoiceRules: {
        invoiceType: [
          { required: true, message: '请输入发票类型', trigger: 'change' }
        ],
        invoiceTitle: [
          { required: true, message: '请输入开票抬头', trigger: 'change' }
        ],
        taxpayerIdentifyCode: [
          { required: true, message: '请输入纳税人识别号', trigger: 'change' }
        ]
      },
      invoiceAllRules: {
        invoiceType: [
          { required: true, message: '请输入发票类型', trigger: 'change' }
        ],
        invoiceTitle: [
          { required: true, message: '请输入开票抬头', trigger: 'change' }
        ],
        taxpayerIdentifyCode: [
          { required: true, message: '请输入纳税人识别号', trigger: 'change' }
        ],
        makeInvoiceAddress: [
          { required: true, message: '请输入单位地址', trigger: 'change' }
        ],
        makeInvoiceTelephone: [
          { required: true, message: '请输入开票电话', trigger: 'change' }
        ],
        openAccountBank: [
          { required: true, message: '请输入开户银行', trigger: 'change' }
        ],
        bankCardNo: [
          { required: true, message: '请输入银行账号', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // 获取客户基本信息
    this.getCustomerInfo()
    // 获取客户标签
    this.getCustomerLabel()
    // 获取客户收货地址
    this.getShippingAdress()
    // 地区联动数据
    this.getArea()
    if (this.$route.query.tabIndex) {
      this.tabIndex = this.$route.query.tabIndex
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 计算 基本信息li一排得个数
      this.getNumLi()
    })
  },
  methods: {
    invoiceTypeChange(val) {
      if (Number(val) === 2) {
        const ruls = {
          invoiceType: [
            { required: true, message: '请输入发票类型', trigger: 'change' }
          ],
          invoiceTitle: [
            { required: true, message: '请输入开票抬头', trigger: 'change' }
          ],
          taxpayerIdentifyCode: [
            { required: true, message: '请输入纳税人识别号', trigger: 'change' }
          ],
          makeInvoiceAddress: [
            { required: true, message: '请输入单位地址', trigger: 'change' }
          ],
          makeInvoiceTelephone: [
            { required: true, message: '请输入开票电话', trigger: 'change' }
          ],
          openAccountBank: [
            { required: true, message: '请输入开户银行', trigger: 'change' }
          ],
          bankCardNo: [
            { required: true, message: '请输入银行账号', trigger: 'change' }
          ]
        }
        this.invoiceRules = Object.assign({}, ruls)
      } else {
        const ruls = {
          invoiceType: [
            { required: true, message: '请输入发票类型', trigger: 'change' }
          ],
          invoiceTitle: [
            { required: true, message: '请输入开票抬头', trigger: 'change' }
          ],
          taxpayerIdentifyCode: [
            { required: true, message: '请输入纳税人识别号', trigger: 'change' }
          ]
        }
        this.invoiceRules = Object.assign({}, ruls)
      }
      this.$refs.invoiceForm.clearValidate()
    },
    // 编辑开票信息保存事件
    editInvoice() {
      this.$refs.invoiceForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UpdateCustomerInvoiceData(this.invoiceForm).then(() => {
            this.isInvoiceDialog = false
            // 获取客户基本信息
            this.getCustomerInfo()
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.addLableLoading = false
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 编辑开票信息点击事件
    editInvoiceClick() {
      this.isInvoiceDialog = true
      const dataInfos = { ...this.dataInfos }
      this.invoiceForm.customerID = dataInfos.customerID
      this.invoiceForm.invoiceType = dataInfos.invoiceType.toString()
      this.invoiceForm.invoiceTitle = dataInfos.invoiceTitle
      this.invoiceForm.taxpayerIdentifyCode = dataInfos.taxpayerIdentifyCode
      this.invoiceForm.makeInvoiceAddress = dataInfos.makeInvoiceAddress
      this.invoiceForm.makeInvoiceTelephone = dataInfos.makeInvoiceTelephone
      this.invoiceForm.openAccountBank = dataInfos.openAccountBank
      this.invoiceForm.bankCardNo = dataInfos.bankCardNo
    },
    // 联系人编辑保存事件
    editContact() {
      this.$refs.contactForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UpdateCustomerContactData(this.contactForm).then(() => {
            this.isContactDialog = false
            // 获取客户基本信息
            this.getCustomerInfo()
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.addLableLoading = false
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 联系人编辑点击事件
    editContactClick() {
      this.isContactDialog = true
      const dataInfos = { ...this.dataInfos }
      this.contactForm.customerID = dataInfos.customerID
      this.contactForm.contactPerson = dataInfos.contactPerson
      this.contactForm.contactManSex = dataInfos.contactManSex.toString()
      this.contactForm.contactMobile = dataInfos.contactMobile
      this.contactForm.contactWx = dataInfos.contactWx
      this.contactForm.contactEmail = dataInfos.contactEmail
    },
    // 编辑客户信息确认事件
    editSaveCus() {
      this.$refs.cusForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UpdateCustomerBaseData(this.cusForm).then(() => {
            this.isCusInfoDialog = false
            // 获取客户基本信息
            this.getCustomerInfo()
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.addLableLoading = false
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 编辑客户信息点击事件
    editCusInfoClick() {
      this.isCusInfoDialog = true
      this.cusForm.customerID = this.dataInfos.customerID
      this.cusForm.customerName = this.dataInfos.customerName
      this.cusForm.telephoneNo = this.dataInfos.telephoneNo
      this.cusForm.province = this.dataInfos.province
      this.cusForm.city = this.dataInfos.city
      this.cusForm.country = this.dataInfos.country
      this.cusForm.customerAddress = this.dataInfos.customerAddress
      this.cusForm.customerRemark = this.dataInfos.customerRemark
      this.cusForm.belongToSalesman = this.dataInfos.belongToSalesman
      this.cusForm.belongToSalesmanName = this.dataInfos.belongToSalesmanName
      this.cusForm.addressArr = []
      this.cusForm.addressArr.push(this.dataInfos.province, this.dataInfos.city, this.dataInfos.country)
    },
    // 得到限售代表人员信息
    getEmployee(val) {
      this.cusForm.belongToSalesman = val.employeeCode
      this.cusForm.belongToSalesmanName = val.employeeName
    },
    // 删除收货地址
    deleteAddress(id) {
      const parmas = {
        receiveAddressID: id
      }
      this.$confirm('确定删除当前收货地址, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.business.DeleteReceiveAddress(parmas).then(() => {
          this.getShippingAdress()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 删除客户标签
    deleTags(id) {
      const parmas = {
        tagID: id
      }
      this.$confirm('确定删除当前客户标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.business.DeleteCustomerTag(parmas).then(() => {
          this.getCustomerLabel()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 设为默认收货地址
    setDefaultAddress(id) {
      const parmas = {
        customerCode: this.$route.query.customerCode,
        receiveAddressID: id
      }
      setTimeout(() => {
        this.$api.business.SetDefaultReceiveAddress(parmas).then(() => {
          // 获取客户收货地址
          this.getShippingAdress()
          this.$message({
            message: '设置成功',
            type: 'success'
          })
        })
      }, 300)
    },
    // 新建地址点击事件
    newAddAddress() {
      this.ops = 'add'
      this.isAdressDialog = true
    },
    // 编辑地址详细信息回显
    editAddress(data) {
      this.ops = 'modify'
      const arr = []
      arr.push(data.province, data.city, data.country)
      data.addressArr = arr
      data.isDefult = Boolean(data.isDefaultReceive)
      this.adressForm = { ...data }
      this.isAdressDialog = true
    },
    // 修改收货地址保存
    editAddAdress() {
      this.adressForm.isDefaultReceive = this.adressForm.isDefult ? 1 : 0
      this.$refs.adressForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.adressForm.customerCode = this.$route.query.customerCode
          const parmas = this.adressForm
          this.$api.business.UpdateReceiveAddress(parmas).then(() => {
            this.addLableLoading = false
            this.isAdressDialog = false
            // 获取客户收货地址
            this.getShippingAdress()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 新建收货地址
    newAddAdress() {
      this.adressForm.isDefaultReceive = this.adressForm.isDefult ? 1 : 0
      this.$refs.adressForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.adressForm.customerCode = this.$route.query.customerCode
          const parmas = this.adressForm
          this.$api.business.AddReceiveAddress(parmas).then(() => {
            this.addLableLoading = false
            this.isAdressDialog = false
            // 获取客户收货地址
            this.getShippingAdress()
            this.$message({
              message: '新建成功',
              type: 'success'
            })
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 选择地址
    areaChange(val) {
      this.adressForm.province = val ? val[0] : ''
      this.adressForm.city = val ? val[1] : ''
      this.adressForm.country = val ? val[2] : ''
    },
    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then(res => {
        this.allAddress = res
      })
    },
    // 获取客户收货地址
    getShippingAdress() {
      const parmas = {
        customerCode: this.$route.query.customerCode
      }
      this.$api.business.QueryCustomersReceiveAddresses(parmas).then(res => {
        this.shippingAddress = res
      })
    },
    // 新建客户标签
    newAddLable() {
      this.labelForm.customerCode = this.$route.query.customerCode
      const parmas = this.labelForm
      this.addLableLoading = true
      this.$api.business.AddCustomerTag(parmas).then(res => {
        this.addLableLoading = false
        this.isLabelDialog = false
        // 获取客户标签
        this.getCustomerLabel()
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      }).catch(() => {
        this.addLableLoading = false
      })
    },
    // 左侧菜单切换
    tabChange(index) {
      this.tabIndex = index
    },
    // 获取客户基本信息
    getCustomerInfo() {
      const parmas = {
        customerID: this.$route.query.customerID
      }
      this.$api.business.QueryCustomerDetail(parmas).then(res => {
        this.dataInfos = res
      })
    },
    // 获取客户标签
    getCustomerLabel() {
      const parmas = {
        customerCode: this.$route.query.customerCode
      }
      this.$api.business.QueryCustomersTags(parmas).then(res => {
        this.tagDatas = res
      })
    },
    Back() {
      this.$router.go(-1)
    },
    // 计算 基本信息li一排得个数
    getNumLi() {
      const wd = this.$refs.rgcon.clientWidth
      const result = Math.floor(wd / 300)
      this.listIndex = result
    },
    // 新建客户标签弹框关闭事件
    closeLabelDialog() {
      if (this.$refs.labelForm) {
        this.$refs.labelForm.resetFields()
      }
      this.labelForm = this.$options.data().labelForm
    },
    // 新建收货地址弹框关闭事件
    closeAddressDialog() {
      if (this.$refs.adressForm) {
        this.$refs.adressForm.resetFields()
      }
      this.adressForm = this.$options.data().adressForm
    },
    // 联系人弹框关闭事件
    closeContactDialog() {
      if (this.$refs.contactForm) {
        this.$refs.contactForm.resetFields()
      }
      this.contactForm = this.$options.data().contactForm
    },
    closeInvoiceDialog() {
      if (this.$refs.invoiceForm) {
        this.$refs.invoiceForm.resetFields()
      }
      this.invoiceForm = this.$options.data().invoiceForm
      this.invoiceRules = this.$options.data().invoiceRules
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  overflow-y: hidden;

  .nav {
    width: 100%;
    padding: 8px;
    align-items: center;
    border-bottom: 1px #e6e6e6 solid;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    z-index: 999;
    height: 50px;
  }
  .back {
    background: #F4F4F4;
    color: #333;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    border-radius: 2px;
  }
  .GCon {
    width: 100%;
    padding: 16px;
    height: calc(100vh - 50px);
    .lfCon {
      width: 318px;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      background: #fff;
      height: 100%;
      overflow-y: auto;

      .userName {
        padding: 16px;
      }

      .userLable {
        margin-top: 4px;

        li {
          cursor: pointer;
          margin-top: 6px;
          border-radius: 2px;
          padding: 4px 10px;
          background: #3f61f1;
          color: #fff;
          margin-right: 6px;
          position: relative;

          .colse {
            position: absolute;
            right: -5px;
            top: -5px;
            color: #e13335;
            background: #fff;
            border-radius: 100%;
            display: none;
          }

          &:hover {
            .colse {
              display: block !important;
            }
          }
        }

        .addLabel {
          border: 1px dashed #3f61f1;
          background: #fff;
          color: #3f61f1;
        }
      }

      .userNav {
        li {
          height: 48px;
          line-height: 48px;
          padding-left: 3px;
          cursor: pointer;

          &.crt {
            border-left: 3px solid #3f61f1;
            background: #3f61f110;
            padding-left: 0;
          }

          .iconfont {
            margin-left: 13px;
            margin-right: 5px;
          }
        }
      }
    }
    .rgCon {
      width: calc(100% - 336px);
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      .baseInfo{
        padding-top: 16px;
      }
      .cusOrderBox{
        height: 100%;
      }
      .inItem {
        .conShow {
          li {
            width: 25%;
            min-width: 280px;
            padding-left: 16px;
            margin-bottom: 16px;
          }

          .listNum3 {
            li {
              width: 33.3%;
            }
          }

          .listNum2 {
            li {
              width: 50%;
            }
          }

          .listNum1 {
            li {
              width: 100%;
            }
          }

          .conBox {
            line-height: 22px;
            margin-top: 4px;
          }

          .conTitle {
            color: #999aaa;
          }
        }
        .addressShow {
          li:hover{
            cursor: pointer;
            .hiddenOptions{
              &>div{
                display: block !important;
              }
            }
          }
          .addressItem {
            padding: 16px;
            border: 1px solid #e6e6e6;
            height: 160px;
            position: relative;
            & > div {
              width: 100%;
            }
            .hiddenOptions{
              &>div{
                background: #3f61f1;
                color: #fff;
                font-size: 12px;
                padding: 5px 0;
                display: none;
                >span{
                  display: inline-block;
                  border-right: 1px solid #fff;
                  padding: 0 4px;
                }
                >span:last-child{
                  border-right: none;
                }
              }
              position: absolute;
              bottom: -24px;
              z-index: 8;
            }
          }
          .newAddAddress {
            &:hover {
              .addressItem {
                border-color: #3f61f1;
              }

              .conTitle {
                color: #3f61f1;
              }

              color: #3f61f1;
            }
          }
        }
      }
    }
  }
}
</style>
